<template>
  <view class="screen-width">
    <van-popup class="bg-tran" v-model="showCropper" position="top" :style="{ height: '100%' }">
      <view class="flex-column-center height100 screen-width">
        <vue-cropper
          ref="cropper"
          :img="img"
          :outputSize="outputSize"
          :outputType="outputType"
          :info="false"
          :full="true"
          :autoCropWidth="autoCropWidth"
          :autoCropHeight="autoCropHeight"
          :canScale="true"
          :canMove="true"
          :canMoveBox="false"
          :original="false"
          :autoCrop="true"
          :fixed="true"
          :fixedNumber="fixedNumber"
          :centerBox="false"
          :infoTrue="false"
          :fixedBox="true"
          :high="true"
          :mode="mode"
        ></vue-cropper>
        <view class="flex items-middle space-around bottom-btn">
          <view @click="cancelCropper">取消</view>
          <view @click="rotateImage">
            <van-icon name="replay" size="14" />
          </view>
          <view @click="getCropBlob">确定</view>
        </view>
      </view>
    </van-popup>
  </view>
</template>
<script>
import { uploadPictures } from "util/upload.js";
export default {
  name: "Upload",
  data() {
    return {
      fixedNumber: [1, 1],
      mode: "100% auto",
      outputType: "png",
      outputSize: 0.8,
      autoCropWidth: window.innerWidth - 100 + "px",
      autoCropHeight: window.innerWidth - 100 + "px",
      img: ""
    };
  },
  props: {
    showCropper: {
      type: Boolean,
      default() {
        return false;
      }
    },
    imageFileName: {
      type: String,
      default() {
        return "";
      }
    }
  },
  methods: {
    // 将本地图片转化为Base64，否则vue-cropper组件显示不出要本地需要剪裁的图片
    imageToBase64(file) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        // 截图框中的图片
        this.img = reader.result;
        uni.hideLoading();
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
    },
    // 确认剪裁并上传图片
    getCropBlob() {
      uni.showLoading({
        title: "上传中"
      });
      let _this = this;
      let formData = new FormData();
      this.$refs.cropper.getCropBlob(data => {
        formData.append("file", data, this.imageFileName);
        let params = formData.get("file");
        uploadPictures(params).then(function(data) {
          if (data === "上传失败") {
            uni.showToast({
              title: "上传失败，请重新上传",
              icon: "none"
            });
            uni.hideLoading();
            _this.$emit("closeCropper", data.result);
          } else {
            uni.showToast({
              title: "上传成功",
              icon: "none"
            });
            uni.hideLoading();
            _this.$emit("closeCropper", data.result);
          }
        });
      });
    },

    // 旋转图片
    rotateImage() {
      this.$refs.cropper.rotateRight();
    },

    // 取消截图上传头像
    cancelCropper() {
      this.$emit("closeCropper");
    }
  }
};
</script>
<style lang="less" scoped>
.height100 {
  height: 100vh;
  width: 100%;
  .bottom-btn {
    height: 50px;
    background: #ffffff;
    font-size: 16px;
    width: 100%;
  }
}
.flex-column-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.vue-cropper {
  background: rgba(0, 0, 0, 0.1);
  .cropper-view-box {
    outline: 1px solid #fff !important;
    outline-color: #fff !important;
  }
}
</style>